import React, { Component } from "react";
import { connect } from "react-redux";
import { addTodo } from "@/store/action";
class TodoHeader extends Component {
  addTodo = (e) => {
    if (e.keyCode === 13) {
      this.props.add(e.target.value);
      e.target.value = "";
    }
  };
  render() {
    return (
      <header className="header">
        <h1>todos</h1>
        <input
          className="new-todo"
          placeholder="请输入内容..."
          onKeyUp={this.addTodo}
          autoFocus
        />
      </header>
    );
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    add(name) {
      dispatch(addTodo(name));
    },
  };
};
export default connect(null, mapDispatchToProps)(TodoHeader);
